<!-- 顾客屏幕-待机 -->
<!-- 自由消费 -->
<template>
  <view class="relative order-details page-root">
    <view class="flex p-10rpx h-full">
      <view class="flex-1 mx-5rpx bg-white p-20rpx rounded-md flex justify-center items-center">
        <view v-if="formData.action == 'waite-input'">
          <text class="block text-center font-bold mb-10rpx">等待输入中</text>
          <u-image :src="imgInputting" mode="aspectFill"></u-image>
        </view>

        <view v-if="formData.action == 'please-pay'">
          <view v-if="formData.payType == 'card'" class="flex flex-col justify-center items-center">
            <text class="block text-center font-bold mb-10rpx">请出示您的会员卡进行支付</text>
            <view class="flex justify-center items-center rounded-full overflow-hidden w-130rpx h-130rpx">
              <u-image src="/static/images/other/card-read.png" mode="aspectFit"></u-image>
            </view>
          </view>
          <view v-else-if="formData.payType == 'face'" class="flex flex-col justify-center items-center">
            <text class="block text-center font-bold mb-10rpx">请将人脸对准摄像头进行支付</text>
            <view class="flex justify-center items-center w-fit">
              <u-image src="/static/images/other/face-read.png" mode="widthFix"></u-image>
            </view>
          </view>
          <view v-else-if="formData.payType == 'scan'" class="flex flex-col justify-center items-center">
            <text class="block text-center font-bold mb-10rpx">请将付款码对准摄像头进行支付</text>
            <view class="flex justify-center items-center w-fit bg-slate-100 rounded-full p-15rpx">
              <u-icon name="scan" size="100rpx" color="#bfc2fe"></u-icon>
              <!-- <u-image src="/static/images/other/face-read.png" mode="widthFix"></u-image> -->
            </view>
          </view>
          <view v-else class="flex flex-col justify-center items-center">
            <text class="block text-center font-bold mb-10rpx">等待支付中</text>
            <view class="flex justify-center items-center w-fit">
              <u-image :src="imgInputting" mode="aspectFit"></u-image>
            </view>
          </view>
        </view>

        <view v-else-if="formData.action == 'awite-pay'">
          <text class="block text-center font-bold mb-10rpx">等待交易中</text>
          <u-image :src="imgPadding" mode="aspectFit"></u-image>
        </view>
      </view>

      <view class="flex flex-col flex-1 mx-5rpx p-20rpx rounded-md bg-white">
        <view class="h-full flex-auto flex flex-col justify-center items-center">
          <view><text class="font-bold">订单金额确认</text></view>
          <view class="flex-col p-10rpx bg-slate-200 px-20rpx mt-10rpx rounded-md min-w-200rpx text-center">
            <text class="block text-gray-400 text-base">订单金额</text>
            <view class="font-bold my-10rpx flex items-end justify-center">
              <text class="text-sm">￥</text>
              <text class="block text-xxl"> {{ formatMoney(formData.chargeMoney) || "0.00" }}</text>
            </view>

            <!-- <view class="my-10rpx flex items-end justify-center"> -->
            <!-- <view class="mr-20rpx">餐补金额</view>
              <text class="text-sm">￥</text>
              <text class="block text-xxl"> {{ formatMoney(formData.chargeMoney) || "0.00" }}</text>
            </view> -->

            <view class="my-15rpx flex-auto">
              <!-- <view class="text-base flex justify-between w-150rpx mb-10rpx">
              <text>卡类别：</text>
              <text>
                {{ merberInfo.vip || "-" }}
              </text>
            </view> -->

              <view class="text-base flex justify-between w-150rpx mb-10rpx">
                <text>助餐补贴：</text>
                <text class="text-blue-400">
                  {{ formatMoney(detaileInfo.mealAllowance) }}
                </text>
              </view>

              <view class="text-base flex justify-between w-150rpx mb-10rpx">
                <text>会员折扣：</text>
                <text> {{ detaileInfo.memberDiscount ? (100 - detaileInfo.memberDiscount) / 10 + "折" : "无" }} </text>
              </view>

              <view class="text-base flex justify-between w-150rpx mb-10rpx">
                <text>套餐余额：</text>
                <text>
                  {{ detaileInfo.packageBalance || "-" }}
                </text>
              </view>

              <!-- <view class="text-base flex justify-between w-150rpx">
              <text>备注：</text>
              <text class="text-blue-400">
                {{ formData.remark }}
              </text>
            </view> -->

              <view class="mt-10rpx remark-box" v-if="formData.remark">
                {{ formData.remark }}
              </view>
            </view>
          </view>
        </view>
      </view>
    </view>
  </view>
</template>
<script lang="ts" setup>
import { onLoad, onPullDownRefresh, onReady } from "@dcloudio/uni-app";
import { reactive, ref, onMounted, onBeforeUnmount } from "vue";

import { getCustomerInfoByCard } from "@/api";
import { formatMoney, getQueryObject } from "@/utils/util";
import { sleep } from "@kingon/app-tools";
import { useStore } from "vuex";

import imgPadding from "/static/images/custom/img-padding.png";
import imgInputting from "/static/images/custom/img-inputting.png";

const store = useStore();

const pageStatus = reactive({
  loading: false,
  // 最后一次更新时间
  lastChangeTime: new Date().getTime(),
});

// 页面传递的参数
const pagePam = {
  id: "",
};

const detaileInfo = ref({
  // 所选餐补金额
  mealAllowance: 0,
  // 当前会员折扣
  memberDiscount: 0,
  // 套餐余额
  packageBalance: 0,
});

const formData = reactive({
  remark: "",
  chargeMoney: 0,
  action: "", // 动作，主要操控左边的显示 【waite-pay 等待交易, waite-input 等待收银原输入, please-pay 请出示支付方式 】
  payType: "", // 支付方式 只有当 action 为 please-pay 时有效，【card 会员卡刷卡,face 会员人脸,scan 付款码,cash 现金支付】
});

onLoad((e: any) => {
  console.log("onLoad:>", e);

  pageStatus.lastChangeTime = new Date().getTime();

  if (e.id) pagePam.id = e.id;
  if (e.action) formData.action = e.action;
  if (e.payType) formData.payType = e.payType;
  formData.chargeMoney = e.money || 0;
  if (e.detaileInfo && e.detaileInfo != "undefined" /*  && e.detaileInfo != "{}" */) {
    detaileInfo.value = JSON.parse(e.detaileInfo);
  }

  // 监听网页哈希变更
  window.addEventListener("hashchange", (e) => {
    pageStatus.lastChangeTime = new Date().getTime();
    // 从 e.newURL 中解析出参数
    const newParam = getQueryObject(e.newURL);
    // const newParam =
    console.log("hashchange:>", e, newParam);

    formData.action = newParam.action || "";
    formData.payType = newParam.payType || "card";
    formData.chargeMoney = newParam.money || 0;
    if (newParam.detaileInfo && newParam.detaileInfo != "undefined") {
      detaileInfo.value = JSON.parse(newParam.detaileInfo);
    }
  });

  // loadSysDict(["sys_payType"]);
});

// (实验功能) 长时间未更新，自动跳转到 初始页
// 吧这个逻辑放到副屏里是因为不想影响主屏的应用操作
let timer:any = null;
const lmiteTime = 60000; // 最长无操作时间
const defultPage = "/pages/customerScreen/defult-index";
// @ts-ignore
clearInterval(timer);
// @ts-ignore
timer = setInterval(() => {
  if (new Date().getTime() - pageStatus.lastChangeTime > lmiteTime) {
    // @ts-ignore 走之前清一下
    clearInterval(timer);

    uni.reLaunch({
      url: defultPage,
    });
  }
}, 5000);

const details = ref({
  payType: "",
});
</script>
<style lang="scss" scoped>
.page-root {
  height: 100%;
  display: flex;
  flex-direction: column;
}
.order-details {
  // height: 90vh;
  box-sizing: border-box;

  .food-list {
    width: 100%;
    min-width: none !important;
  }

  ::v-deep .uni-table {
    min-width: auto !important;
  }

  .details-text {
    font-size: 10rpx;
    white-space: nowrap;
    overflow: scroll;

    &.d-name {
      color: rgb(179, 179, 179);
    }

    &.d-price {
      color: red;
      font-weight: bold;
    }

    &.d-price-back {
      color: rgb(14, 187, 52);
      font-weight: bold;
    }
    &.d-price-discount {
      color: orange;
      font-weight: bold;
    }
  }
}

.remark-box {
  padding: 10rpx;
  background-color: rgb(235, 235, 235);
  border-radius: 5rpx;
  color: #7f7f7f;
  font-size: 10rpx;
  max-width: 150rpx;
}

.btns-bar {
  display: flex;
  justify-content: space-between;
  align-items: center;
  margin: 0 20rpx;

  .bar-item {
    font-size: 8rpx;
    background-color: #efefef;
    padding: 5rpx 10rpx;
    border-radius: 3rpx;
  }
}

.btns-item {
  background-color: #efefef;
  padding: 5rpx 20rpx;
  border-radius: 5rpx;
  margin: 0rpx 15rpx;
  font-size: 12rpx;

  &.confirm {
    color: white;
    background-color: red;
  }

  .btns-item-txt {
    font-size: 10rpx;
    padding: 5rpx 15rpx;
  }

  ::v-deep .u-button {
    padding: 2rpx 20rpx;
  }
}

.radio-list-item {
  display: flex;
  padding: 15rpx;
  background-color: #f5f5f5;
  width: 200rpx;
  justify-content: space-between;
  margin: 5rpx;
  border-radius: 3rpx;

  ::v-deep .u-radio,
  .u-checkbox-label--left {
    margin-right: 10rpx;
  }
}
</style>
